<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/vue3.2.37.global.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/layer.js"></script>
    <style>
        .testRequest {
            display: block;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>

<!--<button id="logout">退出登录</button>-->

<div id="app" style="text-align: center;margin-top: 50px;">

    <h1>客户端后台管理员管理页面</h1>

    <button @click="logout">退出登录</button>


    <table border="1" style="text-align: center;margin: 50px auto;">
        <tr>
            <th colspan="11" style="padding: 10px">客户端管理的授权服务器Token信息<p><button @click="getAllTokenInfos">刷新列表</button></p></th>
        </tr>
        <tr>
            <th>用户ID（第三方）</th>
            <th>用户名（第三方）</th>
            <th>用户名描述（第三方）</th>
            <th>Oauth授权方式</th>
            <th>访问Token使用方式</th>
            <th>访问Token</th>
            <th>访问Token有效时间</th>
            <th>刷新Token</th>
            <th>刷新Token有效时间</th>
            <th>创建时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="tokenInfo in tokenInfos">
            <td>{{tokenInfo.otherSysUser.id}}</td>
            <td>{{tokenInfo.otherSysUser.userName}}</td>
            <td>{{tokenInfo.otherSysUser.userNameDesc}}</td>
            <td>{{tokenInfo.oauthUrlParameter.response_type}}</td>
            <td>{{tokenInfo.token_type}}</td>
            <td>{{tokenInfo.access_token}}</td>
            <td>{{tokenInfo.expires_in}}</td>
            <td>{{tokenInfo.refresh_token}}</td>
            <td>{{tokenInfo.expires_in_refresh}}</td>
            <td>{{tokenInfo.createTime}}</td>
            <td>
                <!--<button style="color: red" @click="deleteThirdSystemInfoHandle(thirdSystemInfo.id)">删除</button>-->
                <!--<button style="color: green" @click="updateThirdSystemInfoHandle(thirdSystemInfo)">更新</button>-->
            </td>
        </tr>

    </table>

</div>

</body>

<script>

    /**
     * 获取url链接中某个参数的参数值
     * @param key 参数名
     */
    function getRequestParam(key) {
        var url = location.search;
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
            }
        }
        var value = theRequest[key];
        return value;
    }


    function logout() {
        //退出登录
        jQuery.get({
            url: "/user-oauth/basic-logout",
            error: function () {
                window.location.reload();
            }
        });
    }

</script>

<script>


    const {createApp} = Vue
    const request = axios.create({})
    createApp({
        data() {
            return {
                tokenInfos: [],
            }
        },
        methods: {
            logout: function () {
                logout();
            },
            getAllTokenInfos: async function () {
                let {data: responseData} = await request.get('/user-oauth/all-token-infos')
                if (responseData) {
                    this.tokenInfos = responseData;

                }
                layer.msg('列表刷新成功', function(){});
            }
        },
        mounted: async function () {
            this.getAllTokenInfos();
        }
    }).mount('#app')



    $(function () {
        //退出登录
        $("#logout").click(function () {
            logout();
        })
    });


</script>

</html>